<template>
    <!-- 地图点信息 -->
    <div class="allMarker">
        <AllinMarker :select-arr="selectArr" :select-menu-arr="selectMenu"></AllinMarker>
    </div>
</template>

<script>
    import AllinMarker from "../../../components/allinMarker/AllinMarker";

    import {
        outAndIn, statistics, irrigation, soundInfo, DeviceAlarm
    } from '../../../axios/public/index'


    export default {
        name: "allMarker",
        components: {
            AllinMarker
        },
        data() {
            return {
                selectArr: [
                    {
                        id: 1,
                        name: '智能广播',
                        imgUrl: require('../../../assets/publicicon/icon-c.png')
                    }, {
                        id: 2,
                        name: '智慧灌溉',
                        imgUrl: require('../../../assets/publicicon/icon-b.png')
                    }, {
                        id: 3,
                        name: '智能屏',
                        imgUrl: require('../../../assets/publicicon/icon-d.png')
                    }, {
                        id: 4,
                        name: '出入闸机',
                        imgUrl: require('../../../assets/publicicon/icon-a.png')
                    }
                ],
                selectMenu: [
                    {
                        id: 0,
                        name: '全部点位'
                    },
                    {
                        id: 1,
                        name: '智能广播',
                        imgUrl: require('../../../assets/publicicon/icon-c.png')
                    }, {
                        id: 2,
                        name: '智慧灌溉',
                        imgUrl: require('../../../assets/publicicon/icon-b.png')
                    }, {
                        id: 3,
                        name: '智能屏',
                        imgUrl: require('../../../assets/publicicon/icon-d.png')
                    }, {
                        id: 4,
                        name: '出入闸机',
                        imgUrl: require('../../../assets/publicicon/icon-a.png')
                    }
                ],
                map: null,// 地图实例对象
                markerArrList: [],// 点位数组
                markerDataArr: null,//全部数据
                friedArr: null,// 出入闸机点位
                screen: [],// 智能屏幕点位
                irrigation: [],//灌溉点位
                broadcast: [],//广播点位
                infoWindowOpen: null,//全局窗口
            }
        },
        mounted() {

        },
        methods: {
            /**
             * 默认设置所有的点位
             */
            setAllMarker(params, map) {

                console.log(params,map,'点位初始化数据')
                this.map = map
                // console.log('默认设置所有点位')
                this.markerDataArr = params
                // console.log(this.markerDataArr)
                let markerArr = []
                this.markerDataArr.forEach(item => {
                    item.forEach(items => {
                        if (items.names === "出入闸机") {
                            items.imgurl = require('../../../assets/publicicon/icon-a.png')
                            this.friedArr = item// 闸机点位
                        } else if (items.names === "智能屏") {
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/publicicon/led-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/publicicon/led-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/publicicon/led-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/publicicon/led-Offline.png')
                            }
                            this.screen = item// 智能屏幕点位
                        } else if (items.names === "智慧灌溉") {
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/publicicon/gg-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/publicicon/gg-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/publicicon/gg-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/publicicon/gg-Offline.png')
                            }
                            this.irrigation = item
                        } else if (items.names === "智能广播") {
                            if (items.status === "0") {
                                items.imgurl = require('../../../assets/publicicon/yx-normal.png')
                            } else if (items.status === "1") {
                                items.imgurl = require('../../../assets/publicicon/yx-Offline.png')
                            } else if (items.status === "2") {
                                items.imgurl = require('../../../assets/publicicon/yx-fault.png')
                            } else if (items.status === "-1") {
                                items.imgurl = require('../../../assets/publicicon/yx-Offline.png')
                            }
                            this.broadcast = item
                        }
                        markerArr.push(items)
                    })
                })


                console.log(markerArr,'ssssssssss')

                this.setMarkerToMap(markerArr)




                const _this = this
                map.on('click', function () {
                    // console.log(_this.infoWindowOpen)
                    if (_this.infoWindowOpen) {
                        _this.infoWindowOpen.close()
                    }
                })
            },
            /*
            * 点位选择
            * */
            selectMarkerItem(data) {
                console.log(data)
                if (this.markerArrList.length !== 0) {
                    this.map.remove(this.markerArrList)
                }
                if (data.name === "全部点位") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        item.forEach(items => {
                            markerArr.push(items)
                        })
                    })
                    this.setMarkerToMap(markerArr)
                } else if (data.name === "出入闸机") {
                    this.setMarkerToMap(this.friedArr)
                } else if (data.name === "智能屏") {
                    this.setMarkerToMap(this.screen)
                } else if (data.name === "智慧灌溉") {
                    this.setMarkerToMap(this.irrigation)
                } else if (data.name === "智能广播") {
                    this.setMarkerToMap(this.broadcast)
                }
            },
            /**
             * 手动选择全部点位
             */
            setMarkerToMap(data) {
                console.log(data, '处理后的数据')
                const _this = this
                data.forEach(item => {
                    const marker = new AMap.LabelMarker({
                        position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                        icon: {
                            image: item.imgurl,
                            size: [30, 30],
                        },
                        text: {
                            content: item.name,
                            direction: 'bottom',
                            style: {
                                fontSize: 15,
                                fillColor: '#fff',
                                padding: [3, 10],
                                backgroundColor: 'rgba(0, 22, 52, 0.49)',
                            }
                        }
                    });
                    _this.map.add(marker);
                    _this.markerArrList.push(marker)
                    marker.on('click', function () {
                        if (item.names === "出入闸机") {
                            // console.log(item, '=====')
                            DeviceAlarm({deviceId: item.deviceId}).then(res => {
                                console.log(res, '///////')
                            })
                            outAndIn({deviceId: item.deviceId}).then(res => {
                                if (item.status === "-1") {
                                    item.statusName = "无状态"
                                } else if (item.status === "0") {
                                    item.statusName = "在线"
                                    item.online = "#1FFE9A"
                                } else if (item.status === "1") {
                                    item.statusName = "离线"
                                    item.online = "#fff"
                                } else if (item.status === "2") {
                                    item.statusName = "故障"
                                }
                                item.faultNumber = 0
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + res.data.dayNumber + '</span>人</p>' +
                                    '<p>当日识别数量</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + res.data.monthNumber + '</span>人</p>' +
                                    '<p>当月识别数量</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + res.data.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                    '<p>闸机状态：<span style="color:' + item.online + ' ">' + '入口' + '</span> </p>' +
                                    '<p>设备故障次数：<span style="color:#FF5A5A">' + item.faultNumber + '次</span><span>（上次维修时间：无记录）</span> </p>' +
                                    '</div>' +
                                    '</div>';
                                _this.openWindow(item, marker, html)
                            })
                        } else if (item.names === "智能屏") {
                            soundInfo(item.deviceId).then(res => {
                                console.log(res, 'ddddddddddd')
                            })
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }
                            item.faultNumber = 0
                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                '<p>策略名称：<span>' + '播放策略021' + '</span> </p>' +
                                '<p>设备组：<span>' + '公益视频06' + '</span> </p>' +
                                '<p>设备故障次数：<span style="color:#FF5A5A">' + item.faultNumber + '次</span><span>（上次维修时间：无记录）</span> </p>' +
                                '</div>' +
                                '</div>';
                            _this.openWindow(item, marker, html)
                        } else if (item.names === "智能广播") {
                            soundInfo(item.deviceId).then(res => {
                                console.log(res, 'ddddddddddd')
                            })
                            if (item.status === "-1") {
                                item.statusName = "无状态"
                            } else if (item.status === "0") {
                                item.statusName = "在线"
                                item.online = "#1FFE9A"
                            } else if (item.status === "1") {
                                item.statusName = "离线"
                                item.online = "#fff"
                            } else if (item.status === "2") {
                                item.statusName = "故障"
                            }
                            item.faultNumber = 0
                            // console.log(item, '广播')
                            let html =
                                '<div class="markerWindow">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.name + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<p>名称：' + item.name + ' </p>' +
                                '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                '<p>策略名称：<span>' + '广播策略008' + '</span> </p>' +
                                '<p>设备组：<span>' + '北区广播策略01' + '</span> </p>' +
                                '<p>设备故障次数：<span style="color:#FF5A5A">' + item.faultNumber + '次</span><span>（上次维修时间：无记录）</span> </p>' +
                                '</div>' +
                                '</div>';
                            _this.openWindow(item, marker, html)
                        } else if (item.names === "智慧灌溉") {
                            irrigation(item.deviceId).then(res => {
                                console.log(item, '灌溉')
                                console.log(res.data)
                                if (item.status === "-1") {
                                    item.statusName = "无状态"
                                } else if (item.status === "0") {
                                    item.statusName = "在线"
                                    item.online = "#1FFE9A"
                                } else if (item.status === "1") {
                                    item.statusName = "离线"
                                    item.online = "#fff"
                                } else if (item.status === "2") {
                                    item.statusName = "故障"
                                }

                                res.data.todayCount = res.data.todayCount ? res.data.todayCount : 0 // 当日灌溉次数
                                res.data.todayNumber = res.data.todayNumber ? res.data.todayNumber : 0 // 当日用水量
                                res.data.totalNumber = res.data.totalNumber ? res.data.totalNumber : 0 // 总用水量

                                item.faultNumber = 0
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + res.data.monthCount + '</span>次</p>' +
                                    '<p>当日灌溉次数</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + res.data.monthNumber + '</span>t</p>' +
                                    '<p>当日用水量</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + res.data.totalNumber + '</span>t</p>' +
                                    '<p>总用水量</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<p>名称：' + item.name + ' </p>' +
                                    '<p>状态：<span style="color:' + item.online + ' ">' + item.statusName + '</span> </p>' +
                                    '<p>设备故障次数：<span style="color:#FF5A5A">' + item.faultNumber + '次</span> </p>' +
                                    '</div>' +
                                    '</div>';
                                _this.openWindow(item, marker, html)
                            })
                        }
                        // _this.openWindow(item, marker)
                    })
                })
            },
            /*
            * 打开弹窗事件
            * */
            openWindow(item, marker, html) {
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: html, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(-10, -30),
                    anchor: "top-left"
                });
                this.infoWindowOpen = infoWindow
                infoWindow.open(this.map, marker.getPosition());
                window.clearWindowInfo = function () {
                    infoWindow.close()
                }
            }
        },
        beforeDestroy() {
            this.map.remove(this.markerArrList)
            if (this.infoWindowOpen !== null) {
                this.infoWindowOpen.close()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>